<template>
    <div class="PopWeight">
        <van-popup @click-overlay="onClickOverlay" v-model:show="show" position="bottom" round>
            <div class="title">记身体数据</div>
            <van-cell-group inset>
                <van-field readonly @click="inputTarget(true)" class="inputTarget input"
                    :class="{ 'active': showTarget }" v-model="targetWeight" label="目标体重(公斤)" placeholder="请输入目标体重" />
                <van-field readonly @click="inputNow(true)" class="inputNow input" :class="{ 'active': showNow }"
                    v-model="nowWeight" label="当前体重(公斤)" placeholder="请输入当前体重" />
            </van-cell-group>
            <div class="btn">
                <van-button @click="save" type="primary" size="large">保存</van-button>
            </div>
            <div class="NumberKeyBord">
                <van-number-keyboard extra-key="." :show="showKeybord" @input="onInput" @delete="onDelete" />
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { showFailToast } from 'vant';


const show = ref(false);
const showKeybord = ref(true);
const targetWeight = ref('')
const nowWeight = ref('')
const showTarget = ref(false)
const showNow = ref(false)
const emits = defineEmits(['selectWeight'])


const onInput = (val) => {
    if (showTarget.value) {
        if (val === '.' && targetWeight.value.includes('.')) return
        if (targetWeight.value && targetWeight.value.includes('.') && targetWeight.value.split('.')[1].length >= 1) return
        targetWeight.value += val
    } else if (showNow.value) {
        if (val === '.' && nowWeight.value.includes('.')) return
        if (nowWeight.value && nowWeight.value.includes('.') && nowWeight.value.split('.')[1].length >= 1) return
        nowWeight.value += val
    }
}

const onDelete = () => {
    if (showTarget.value) {
        targetWeight.value = targetWeight.value.slice(0, -1)
    } else if (showNow.value) {
        nowWeight.value = nowWeight.value.slice(0, -1)
    }
}

const inputTarget = (flag) => {
    showTarget.value = flag
    showNow.value = !flag
}

const inputNow = (flag) => {
    showNow.value = flag
    showTarget.value = !flag
}

const save = () => {
    showTarget.value = false
    showNow.value = false
    if (targetWeight.value === '' || nowWeight.value === '') {
        showFailToast('请输入数据')
    } else {
        emits('selectWeight', { targetWeight: targetWeight.value, nowWeight: nowWeight.value })
        show.value = false
        nowWeight.value = ''
    }
}

const onClickOverlay = () => {
    showTarget.value = false
    showNow.value = false
}

defineExpose({
    show
})

</script>

<style lang="less" scoped>
.PopWeight {
    .title {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 0.53rem;
        font-size: 0.4rem;
    }

    .input {
        :deep(#van-field-1-label) {
            font-size: 13px;
            line-height: 1.28rem;
        }

        :deep(#van-field-2-label) {
            font-size: 13px;
            line-height: 1.28rem;
        }

        :deep(.van-field__body) {
            line-height: 1.28rem;

            .van-field__control {
                font-size: 0.53rem;
            }
        }

        &.active {
            background: #ece9e9;
        }
    }

    .inputNow {
        margin-bottom: 0.53rem;
        border-bottom: 1px solid #E5E7EB;
    }

    .btn {
        padding: 0 0.4rem;
        margin-bottom: 0.4rem;
    }

    .NumberKeyBord {
        height: 6.51rem;
    }
}
</style>